<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<h3>事件监听</h3>
		<p id="text">
			为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。
		</p>
		<button id="btn">点击改变文字颜色</button>
		<script>
			// 1. 获取 button 对应的 DOM 对象 要求1 事件源，事件发生在哪个对象身上
			const btn = document.querySelector("#btn");
			const p = document.querySelector("#text");
			// 2. 添加事件监听
			btn.addEventListener("click", function () {
				p.style.color = "red";
			});
			// 3. 只要用户点击了按钮，事件便触发了！！！
		</script>
		<button>点击</button>
		<script>
			// 需求： 点击了按钮，弹出一个对话框
			// 1. 事件源   按钮
			const btn1 = document.querySelectorAll("button")[1];
			// 2.事件类型 点击鼠标   click 字符串
			btn1.addEventListener("click", function () {
				alert("hello");
			});
			// 3. 事件处理程序 弹出对话框
		</script>
	</body>
</html>
